<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>千郡医疗-新增预约</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" th:href="@{/weixin/css/style.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
    <script type="text/javascript"  th:src="@{/weixin/js/adaptive.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/fastclick.min.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/weui.min.js}"></script>
	<script type="text/javascript" th:src="@{/assets/js/plugins/moment/moment.js}"></script>
	<style type="text/css">
	 body{font-size: initial !important;}
	</style>
</head>
<body>
	<section class="agentPage">
		<ul>
			<li>
				<p>预约项目</p>
				<p><input type="text" id="productpicker" class="txt" readonly="readonly" /></p>
			</li>
		</ul>
		<ul class="bespokeBox">
			<li class="box-h">
				<label for="" class="t">预约日期</label>
				<input type="text" class="txt flex" id="date" readonly="readonly" />
			</li>
			<li class="box-h">
				<label for="" class="t">预约时间</label>
				<input type="text" class="txt flex" id="time" readonly="readonly" />
			</li>
		</ul>
		<p class="btm">
			<a href="javascript:;" id="submit" class="comBtn">提交申请</a>
		</p>
		<form id="form">
			<input type="hidden" name="productId" id="productId" />
			<input type="hidden" name="productName" id="productName" />
			<input type="hidden" name="bookDate" id="bookDate" />
		</form>
	</section>
	<script th:inline="javascript">
   		var products = /*[[${products}]]*/ null;
	</script>
	<script type="text/javascript">
	/*<![CDATA[*/
		var productList = (function(){
			var list = [];
			for(var i in products){
				list.push({"label":products[i].name, "value":products[i].id, "children":[]});
			}
			return list;
		})();
		
		var secondList = (function(){
			var list = [];
			for(var i = 0; i < 61; i++){
				list.push({"label":i, "value":i});
			}
			return list;
		})();
		
		var timeList = (function(){
			var list = [];
			for(var i = 8; i < 22; i++){
				list.push({"label":i, "value":i, "children":secondList});
			}
			return list;
		})();
		
		$("#productpicker").click(function(){
		   weui.picker(productList,{
		        onConfirm: function onConfirm(result) {
		            $("#productId").val(result[0].value);
		            $("#productName").val(result[0].label);
		            $("#productpicker").val(result[0].label);
		        },
		        id: 'productpicker2'
		   });
		});
	
		$("#date").click(function(){
			weui.datePicker({
		        start: moment().add(1,"days").format("YYYY-MM-DD"),
		        end: moment().add(30,"days").format("YYYY-MM-DD"),
		        onConfirm: function onConfirm(result) {
		        	var d = result[0].value + "-" + result[1].value + "-" + result[2].value;
		        	//$("#date").val(moment(d).format("YYYY-MM-DD"));
		        	$("#date").val(d);
		        },
		        id: 'datePicker'
		    });
		});
		
		$("#time").click(function(){
			weui.picker(timeList,{
		        onConfirm: function onConfirm(result) {
		        	var d = result[0].value + ":" + result[1].value;
		        	$("#time").val(d);
		        },
		        id: 'timepicker'
		   });
		});
		
		$("#submit").click(function() {
			$("#bookDate").val($("#date").val() + " " + $("#time").val());
			var l = weui.loading("正在提交");
			$.ajax({
				type : "POST",
				url : "/qianjun/weixin/book/add",
				data : $('#form').serialize(),
				error : function(request) {
					l.hide();
					weui.alert("保存失败");
				},
				success : function(ret) {
					l.hide();
					if(!ret.success){
						weui.alert(ret.msg);
						return;
					}
					weui.toast("预约成功");
					setTimeout('location.href = "/qianjun/weixin/book"', 1000);
				}
			});
		});
	
		/*]]>*/
	</script>
</body>
</html>